<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ plugin.displayName || plugin.name }} - {{ pluginType }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="closeModal()"
      [disabled]="saveInProgress"
    ></button>
  </div>
  <div class="modal-body pb-0">
    @if (loading) {
    <div class="text-center primary-text">
      <i class="fa fa-cog fa-spin" style="font-size: 75px"></i>
    </div>
    } @if (!loading && !canConfigure) {
    <div class="alert alert-warning mb-0">
      {{ 'plugins.settings.message_manual_config_required' | translate }} {{
      'plugins.settings.message_consult_documentation' | translate }}
    </div>
    } @if (schema?.headerDisplay) {
    <markdown class="plugin-md" [data]="schema.headerDisplay | interpolateMd" />
    }

    <!-- MULTIPLE CONFIG BLOCKS-->
    @if (!loading && canConfigure) {
    <div ngbAccordion [closeOthers]="true">
      @for (block of pluginConfig; track block) {
      <div
        [ngbAccordionItem]="'configBlock.' + $index"
        class="card"
        [collapsed]="show !== 'configBlock.' + $index"
        [id]="'configBlock.' + $index"
      >
        <div ngbAccordionHeader class="card-header">
          <div class="d-flex align-items-center justify-content-between">
            <h5 class="m-0 py-2 ps-1">{{ block.name || pluginAlias }}</h5>
            <div>
              @if (!schema?.singular || pluginConfig.length > 1) { @if (show === 'configBlock.' + $index) {
              <button
                class="btn btn-danger m-0 ms-2"
                (click)="removeBlock($index)"
                [ngbTooltip]="'form.button_delete' | translate"
                container="modal"
                [openDelay]="150"
                triggers="hover"
              >
                <i class="fa fa-trash"></i>
              </button>
              }
              <button
                class="btn btn-primary m-0 ms-2 me-2"
                ngbAccordionToggle
                (click)="editBlock($index)"
                [ngbTooltip]="'form.button_edit' | translate"
                container="modal"
                [openDelay]="150"
                triggers="hover"
              >
                <i class="fa fa-edit"></i>
              </button>
              } @if (!schema?.singular) {
              <i
                class="fa fa-xl"
                [ngClass]="{
                  'fa-circle-check green-text': formBlocksValid[$index],
                  'fa-circle-exclamation red-text': strictValidation && !formBlocksValid[$index],
                  'fa-circle-exclamation orange-text': !strictValidation && !formBlocksValid[$index]
                }"
                [ngbTooltip]="(formBlocksValid[$index] ? 'form.label_valid' : (strictValidation ? 'form.label_invalid_strict' : 'form.label_invalid')) | translate"
                container="modal"
                placement="left"
                [openDelay]="150"
                triggers="hover"
              ></i>
              }
            </div>
          </div>
        </div>
        <div ngbAccordionCollapse>
          <div ngbAccordionBody class="card-body p-0" style="height: 400px">
            <ngx-monaco-editor
              class="flex-grow-1 h-100 w-100 mb-0 pb-0"
              [options]="editorOptions"
              [(ngModel)]="currentBlock"
              (onInit)="onEditorInit($event)"
            />
          </div>
        </div>
      </div>
      }
    </div>
    @if (schema?.footerDisplay) {
    <div class="mt-3">
      <markdown class="plugin-md" [data]="schema.footerDisplay | interpolateMd" />
    </div>
    } }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="closeModal()"
        [disabled]="saveInProgress"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end d-flex align-items-center justify-content-end">
      @if (canConfigure) { @if (schema?.singular) {
      <i
        class="fa fa-xl me-2"
        [ngClass]="{
            'fa-circle-check green-text': formIsValid,
            'fa-circle-exclamation red-text': strictValidation && !formIsValid,
            'fa-circle-exclamation orange-text': !strictValidation && !formIsValid
          }"
        [ngbTooltip]="(formIsValid ? 'form.label_valid' : (strictValidation ? 'form.label_invalid_strict' : 'form.label_invalid')) | translate"
        container="modal"
        placement="top"
        [openDelay]="150"
        triggers="hover"
      ></i>
      } @if (!schema?.singular) {
      <button type="button" class="btn btn-elegant me-2" data-bs-dismiss="modal" (click)="addBlock()">
        <i class="fa fa-plus"></i>
      </button>
      }
      <button
        type="button"
        class="btn btn-primary"
        data-bs-dismiss="modal"
        (click)="save()"
        [disabled]="saveInProgress || (!formIsValid && strictValidation)"
      >
        @if (!saveInProgress) { {{ 'form.button_save' | translate }} } @if (saveInProgress) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </button>
      } @if (!canConfigure) {
      <button class="btn btn-primary" (click)="openFullConfigEditor()">
        {{ 'plugins.settings.label_open_config_editor' | translate }}
      </button>
      }
    </div>
  </div>
</div>
